import React, { Component } from 'react'
import { NavLink, Outlet } from 'react-router-dom'

import store from '../../redux/store'

import style from './css/index.module.css'

console.log('Films', style)

export default class Films extends Component {
  state = {
    isShow: true,
  }

  componentDidMount() {
    store.subscribe(() => {
      console.log('store', store.getState())
      this.setState({ isShow: store.getState().showBar })
    })
  }
  render() {
    return (
      <>
        {this.state.isShow && (
          <>
            <div className={style.swiper}>Film 轮播</div>
            <ul className={style.navbar}>
              <li>
                <NavLink to='/film/nowPlaying'>正在热映</NavLink>
              </li>
              <li>
                <NavLink to='/film/comingSoon'>即将上映</NavLink>
              </li>
            </ul>
          </>
        )}

        <Outlet />
      </>
    )
  }
}
